<template>
  <div id="qualificationCertificate">
    <header>
      <i @click="goBack()"></i>
      <div>主播认证</div>
    </header>
    <div class="border-8"></div>
    <div class="box">
      <div style="margin-top:10px;border: 2px dashed #C9C9C9;">
                <img src="../../../image/imgEg.png" class="avatar">
      </div>
      <div>
        <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
          :on-success="(res,file)=>{
                    return handleAvatarSuccess(res,file,1)
                  }"
          :before-upload="beforeAvatarUpload">
          <img v-if="personalData.f_img" :src="personalData.f_img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <p>请参考示例上传: 支持png,jpg,gif格式的图片</p>
      </div>
      <div>
        <!-- <a href="javascript:;" @click='upload()'>{{button}}</a> -->
        <a href="javascript:;" @click='upload()'>{{status=='add'?'提交':button}}</a>
      </div>
      <div class="tankuang" v-if="show">{{pass}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        button: '提交',
        status: 'add', //add edit
        show: false,
        pass: '',
        personalData: {
          userid: '',
          id: localStorage.getItem("loginMobile"),
          f_img: '', //身份证反面
        },
      }
    },
    components: {

    },
    methods: {
      //上传图片
      handleAvatarSuccess(res, file, i) {
        if (res.state == 200) {
          //身份证正面
          if (i == 0) {
            this.personalData.z_img = res.result_origin;
            //身份证反面
          } else if (i == 1) {
            this.personalData.f_img = res.result_origin;
          }
        }
      },
      //上传之前判断格式
      beforeAvatarUpload(file) {
        if (!/image\/\w+/.test(file.type)) {
          this.$utils._toast('请确保文件为图像类型');
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$utils._toast('上传图片不能超过5M');
          return false;
        }
      },
      // 判断是首次填写还是编辑
      isCommit() {
        this.userid = localStorage.getItem("loginMobile");
        this.$api.get(this.$api.baseURLSchool, "view_detail/live_acc/?userid=" + this.userid, {}, r => {
          if (r.data.ret == 0) {
            this.status = 'add';
            this.button = "提交";
          } else if (r.data.ret == 1) {
            this.status = 'edit';
            this.personalData = r.data.info;
          }
        }, err => {
          console.log(err);
        })
      },
      isPass() {
        //判断用户是否认证 如果认证审核通过  per_app_status 0已提交未审核  1审核通过  2审核失败
        this.$api.get(this.$api.baseURLSchool, "user_info_check?id=" + localStorage.getItem("loginMobile"), {}, r => {
          if (r.data.info.info1.live_status == "1") {
            this.button = "审核通过";
            this.$router.push({
              path: '/myLiveRoom'
            })
          } else if (r.data.info.info1.live_status === "0") {
            this.button = "审核中";
          } else if (r.data.info.info1.live_status == "2") {
            this.button = "审核失败";
            this.show = true
            this.pass = r.data.info.info2.content
          }
        }, err => {
          console.log(err);
        })

      },
      //点上传按钮传到表中
      upload() {
        this.personalData.userid = localStorage.getItem("loginMobile");
        if (this.personalData.f_img) {
          this.$api.post(this.$api.baseURLSchool, "updatedata/live_acc/" + this.status, this.personalData, r => {
            if (r.data.ret == 1) {
              this.$utils._toast("保存成功");
              this.status='edit'
              this.button = '审核中'
            }
          }, err => {
            console.log(err);
          })

        } else {
          this.$utils._toast("请检查是否填写完整");
        }
      },
      goBack() {
        this.$router.push({
          path: '/my'
        })
      },
    },
    created() {
      this.isCommit();
      this.isPass();
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .box {
    position: relative;
    .tankuang {
      word-wrap: break-word;
      word-break: normal;
      width: 155px;
      height: 110px;
      letter-spacing: 0.5px;
      overflow-y: auto;
      background: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%)
    }
  }

</style>
